import React, { Component } from 'react'
import { Button, WhiteSpace, Toast } from 'antd-mobile'
import { Icon } from 'components'
// import axios from 'axios'
import './index.less'
import { post } from '../../utils'
import { browser } from 'muka'

let status = true

export default class LoginMode extends Component<any, any> {

    public render(): JSX.Element {
        return (
            <div className="loginMode">
                <div className="loginMode_topIcon">
                    {/* <img src={require('../../assets/login_Signout.png')} /> */}
                </div>
                <div className="loginMode_BtnWrap">
                    {
                        browser.isWX && (
                            <Button type="primary" className="loginMode_Btn loginMode_weChat" activeStyle={false} onClick={this.handleWxLogin}>
                                <Icon type="weChat" className="loginMode_Btn_icon" />
                                <span>微信登陆</span>
                            </Button>
                        )
                    }
                    <WhiteSpace className="loginMode_whiteSpace" />
                    {/* {
                        !browser.isWX && (
                            <Button type="primary" className="loginMode_Btn loginMode_account" activeStyle={false} onClick={() => { this.props.history.push('/loginMode/login') }}>
                                <Icon type="arrow_long_right" className="loginMode_arrow_long_right" />
                                <span>账号登陆</span>
                            </Button>
                        )
                    } */}
                    <Button type="primary" className="loginMode_Btn loginMode_account" activeStyle={false} onClick={() => { this.props.history.push('/loginMode/login') }}>
                        <Icon type="arrow_long_right" className="loginMode_arrow_long_right" />
                        <span>账号登陆</span>
                    </Button>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        window.removeEventListener('popstate', this.handlCallback, false)
        window.addEventListener('popstate', this.handlCallback, false)
        status = false
    }

    public componentWillMount() {
        const { history, SET_WX_INFO } = this.props
        const search: any = browser.search
        if (search.code) {
            Toast.loading('', 0)
            post('usersapi/notityLogin', {
                code: search.code
            }).then((data: any) => {
                Toast.hide()
                SET_WX_INFO(data)
                history.push('/loginMode/weChatLogin')
            }).catch(() => {
                Toast.hide()
            })
        }
    }

    public componentWillUnmount() {
        status = true
    }

    private handlCallback = () => {
        const { history } = this.props
        if (status) {
            return
        }
        history.go(-2)
        status = true
    }

    private handleWxLogin = () => {
        post('usersapi/weChatAuthLogin', {
            redirect_uri: location.href
        }).then((data: any) => {
            location.href = data
            // axios.post(data).then((val: any) => {
            //     console.log(val)
            // })
        })
    }
}